<template>
  <div class="content">
    <!-- 页头 -->
    <div>
      <a-breadcrumb>
        <a-breadcrumb-item>文章管理</a-breadcrumb-item>
        <a-breadcrumb-item>
          <a-link @click="jumpToList">文章列表</a-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>文章创建</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- form 表单 -->
    <div style="margin-top: 22px">
      <a-form :model="form" @submit="handleSubmit" class="fo">
        <a-form-item
          :label-col-props="labelColProps"
          :wrapper-col-props="wrapperColProps"
          field="title"
          tooltip="请输入文章标题"
          label="标题"
        >
          <a-input v-model="form.title" placeholder="请输入文章标题" />
        </a-form-item>
        <a-form-item
          :label-col-props="labelColProps"
          :wrapper-col-props="wrapperColProps"
          field="author"
          label="作者"
        >
          <a-input v-model="form.author" placeholder="请输入文章作者" />
        </a-form-item>
        <a-form-item
          :label-col-props="labelColProps"
          :wrapper-col-props="wrapperColProps"
          field="summary"
          label="概要"
        >
          <a-input v-model="form.summary" placeholder="请输入文章概要" />
        </a-form-item>
        <a-form-item
          :label-col-props="labelColProps"
          :wrapper-col-props="wrapperColProps"
          field="content"
          label="内容"
        >
          <!-- <a-textarea
            v-model="form.content"
            placeholder="请输入文章内容(MarkDown格式内容)"
            allow-clear
          /> -->
          <md-editor v-model="form.content" />
        </a-form-item>
        <a-form-item
          :label-col-props="labelColProps"
          :wrapper-col-props="wrapperColProps"
        >
          <a-button :loading="createLoading" html-type="submit">保存</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { CREATE_BLOG, DESCRIBE_BLOG, UPDATE_BLOG } from "@/api/blog.js";
import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";
import MdEditor from "md-editor-v3";
import "md-editor-v3/lib/style.css";

// 表单标签宽度, 标签元素布局选项
const labelColProps = { span: 1 };
// 表单控件布局选项
const wrapperColProps = { span: 22 };

// 获取router
const router = useRouter();

// 跳转到列表页
const jumpToList = () => {
  router.push("/backend/blog/list");
};

// 创建时 该blog对象为空
// 编辑时,需要获取被编辑的blog对象
let form = reactive({ title: "", author: "", summary: "", content: "" });

const blogId = router.currentRoute.value.query.id;
let isEdit = false;

// http://localhost:5173/backend/blog/create blogId = undefined
if (blogId && blogId != 0) {
  isEdit = true;
}

if (isEdit) {
  try {
    const resp = await DESCRIBE_BLOG(blogId);
    // 替换掉新的响应式对象
    form = reactive(resp);
  } catch (error) {
    // 反馈组件, 进行消息提醒
    Message.error({
      content: `查询文章: ${error.message}`,
      duration: 5000,
    });
  }
}

const createLoading = ref(false);

const handleSubmit = async (data) => {
  if (data.errors == undefined) {
    createLoading.value = true;
    if (isEdit) {
      try {
        await UPDATE_BLOG(blogId, data.values);
        router.push("/backend/blog/list");
      } catch (error) {
        // 反馈组件, 进行消息提醒
        Message.error({
          content: `编辑失败: ${error.message}`,
          duration: 5000,
        });
      } finally {
        createLoading.value = false;
      }
    } else {
      try {
        await CREATE_BLOG(data.values);
        router.push("/backend/blog/list");
      } catch (error) {
        // 反馈组件, 进行消息提醒
        Message.error({
          content: `保存失败: ${error.message}`,
          duration: 5000,
        });
      } finally {
        createLoading.value = false;
      }
    }
  }
};
</script>

<style lang="css" scoped>
.content {
  display: flex;
  flex-direction: column;
  padding: 0px 20px 0px 0px;
}
</style>
